<template>
  <view class="main-content">
    <PlayTabContent v-if="currentTab === 0" />
    <ShopTabContent v-if="currentTab === 1" />
    <MessageTabContent v-if="currentTab === 2" />
    <MineTabContent v-if="currentTab === 3" />
    <CustomTabBar :current="currentTab" @change="handleTabChange" />
  </view>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar.vue'
import PlayTabContent from '@/components/tab-content/Play.vue'
import ShopTabContent from '@/components/tab-content/Shop.vue'
import MessageTabContent from '@/components/tab-content/Message.vue'
import MineTabContent from '@/components/tab-content/Mine.vue'

export default {
  components: {
    CustomTabBar,
    PlayTabContent,
    ShopTabContent,
    MessageTabContent,
    MineTabContent,
  },
  data() {
    return {
      currentTab: 0
    }
  },
  methods: {
    handleTabChange(index) {
      this.currentTab = index;
    },
  },
}
</script>

<style scoped>
.main-content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
</style>
